<template>
  <div>
    <el-form @submit.native.prevent :inline="true">
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="getReport()">刷新</el-button>
        <el-button @click="handleEdit()">
          <i class="fa fa-fw fa-plus"></i>
          新增
        </el-button>
        <el-button @click="handlePrint()">
          <i class="fa fa-print"></i>
          打印模板
        </el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
    <check-report-dialog
      :query-id="queryId"
      @success="getReport()"
      :visible.sync="checkVisible"
      :check-id="checkId"
      :view-mode="viewMode"
    ></check-report-dialog>

    <check-attachment
      :visible.sync="uploadVisible"
      :table-id="uploadId"
      :form-data="uploadFormData"
      @success="getReport()"
    ></check-attachment>

    <el-dialog
      top="30px"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="beforeClose"
      :visible.sync="viewVisible"
    >
      <el-tabs>
        <el-tab-pane label="检查报告">
          <check-report :view-mode="true" :check-id="viewId" :query-id="queryId"></check-report>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <check-attach-view :attachment="viewAttachment"></check-attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import CheckReportDialog from '@/credit/views/city/self/after/report/CheckReportDialog'
import CheckAttachment from '@/credit/views/city/self/after/report/CheckAttachment'
import CheckReport from '@/credit/views/city/self/after/report/CheckReport'
import CheckAttachView from '@/credit/views/city/self/after/report/CheckAttachView'
export default {
  props: {
    queryId: String,
  },
  components: {
    CheckReportDialog,
    CheckAttachment,
    CheckReport,
    CheckAttachView,
  },
  data() {
    return {
      tableName: 'loan_beh_check_report',
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '检查批次', prop: 'batch_no', align: 'center' } },
        {
          attrs: { label: '检查时间', prop: 'check_date', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy年MM月dd日'),
        },
        { attrs: { label: '检查人', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '走访对象及参加人', prop: 'visit_obj_person', align: 'center' } },
        { attrs: { label: '客户签字', prop: 'corp_name', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: '170px' },
          operations: [
            {
              content: '编辑',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            { content: '上传附件', icon: 'fa fa-clipboard', event: this.handleUpload },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
            {
              content: '删除',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger' },
              event: this.handleDelete,
            },
          ],
        },
      ],
      viewMode: true,
      checkVisible: false,
      checkId: '',

      uploadVisible: false,
      uploadId: '',
      uploadFormData: {},

      viewVisible: false,
      viewId: '',
      viewAttachment: '',
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getReport()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    handlePrint() {
      this.checkVisible = true
      this.checkId = ''
      this.viewMode = true
    },
    handleUpload(row = {}) {
      this.uploadVisible = true
      this.uploadId = row.id
      this.uploadFormData = { ...row }
    },
    handleEdit(row = {}) {
      this.checkVisible = true
      this.checkId = row.id || ''
      this.viewMode = false
    },
    handleView(row) {
      this.viewVisible = true
      this.viewId = row.id
      this.viewAttachment = row.report_attachment
    },
    beforeClose() {
      this.viewVisible = false
    },
    handleDelete(row) {
      this.$utils
        .msgbox({
          message: `确定删除报告？`,
          beforeClose: () => this.$api.deleteData(this.$serviceName, this.tableName, row.id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getReport()
        })
        .catch(err => this.$message.error(`删除失败，请重试！${err}`))
    },
    getReport() {
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            'customer_related_id.eq': this.queryId,
            fields: [
              'batch_no',
              'id',
              'check_date',
              'submit_person_name',
              'visit_obj_person',
              'corp_name',
              'report_attachment',
            ],
          },
          { create_time: 'asc' }
        )
        .then(res => {
          this.tableData = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
